﻿@page "/datagrid/draganddrop-within-grid"

@using Syncfusion.Blazor.Grids
@using BlazorDemos
@using blazor_griddata
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the <a target='_blank' href='https://www.syncfusion.com/blazor-components/blazor-datagrid'>Blazor Grid Component</a> with the row drag and drop feature within the same grid. You can rearrange the grid rows by using drag icon in left side of grid column. Here, you can drag and drop the grid rows between the decided rows.</p>
</SampleDescription>
<ActionDescription>
   <p>Row drag and drop can be enabled by setting the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowRowDragAndDrop'>AllowRowDragAndDrop</a></code> property as true.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfGrid DataSource="@GridData" AllowRowDragAndDrop="true" Height="400">
                <GridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple"></GridSelectionSettings>
                <GridColumns>
                    <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right"  Width="120"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText="Order Date" Format="d" TextAlign="TextAlign.Right"  Width="130"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" TextAlign="TextAlign.Right"  Format="C2" Width="120"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.ShippedDate) HeaderText="Shipped Date" Width="150" Format="d" TextAlign="TextAlign.Right"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="130"></GridColumn>
                </GridColumns>
            </SfGrid>
        </div>
    </div>
</div>


@code{

    public List<OrdersDetails> GridData { get; set; }

    protected override void OnInitialized()
    {
        GridData = OrdersDetails.GetAllRecords();
    }
}
